<template>
  <div class="leftMenu">
    <img class="tip" src="../assets/menuTip.png" alt="">
    <div class="titleBox">
      <span class="title">{{title}}</span>
      <span class="des">{{des}}</span>
    </div>
    <div :class="['label',{active:selected == index}] " v-for="(item,index) in menuList" :key="index" @click="handleClick(index,item.name)">
      <span>{{ item.title }}</span>
      <i class="el-icon-right"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftMenu",
  props:{
    title:{
      default:'个人中心',
    },
    des:{
      default:'Individual center'
    }
  },
  data(){
    return {
      menuList:[
        {
          title:'个人信息',
          name:'userInfo'
        },
        {
          title:'我的订单',
          name:'myOrder'
        },
      ],
      selected:0,
    }
  },
  methods:{
    handleClick(index,name){
      this.selected = index
      this.$router.push({name:name})
      this.$emit('handleClick',this.menuList[index])
    }
  }
}
</script>

<style scoped lang="less">
.leftMenu{
  width: 200px;
  min-height: 500px;
  background-color: white;
  position: relative;
  .label{
    padding: 0 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 36px;
    cursor: pointer;
    i{
      display: none;
    }
  }
  .active{
    color: #0F47B8;
    i{
      display: inherit;
    }
  }
  .tip{
    position: absolute;
    top:-8px;
    left:12px
  }
  .titleBox{
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 20px;
    .title{
      font-size: 16px;
    }
    .des{
      font-size: 16px;
      transform: scale(0.5,0.5)
    }
  }
 
}
</style>